<template>
  <el-table :data="tableData" :height="height">
    <template v-for="col in columns" :key="col.prop">
      <!-- 默认列渲染 -->
      <el-table-column
        v-if="!col.slotName && !col.render && col.prop !== 'action'"
        :prop="col.prop"
        :label="col.label"
        :fixed="col.fixed"
        :align="col.align || 'left'"
        :width="col.width"
      >
        <template #default="scope">
          {{ scope.row[col.prop] || '-' }}
        </template>
      </el-table-column>

      <!-- 自定义操作列 -->
      <el-table-column
        v-if="col.prop === 'action'"
        :key="col.prop"
        :label="col.label"
        :width="col.width"
        :fixed="col.fixed"
      >
        <template #default="{ row, $index }">
          <slot name="action" :row="row" :index="$index"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

type Column = {
  prop: string
  type?: string
  label: string
  fixed?: boolean
  width?: string
  align?: string
  slotName?: string
  buttons?: { text: string; click: (row: any) => void }[]
  render?: (row: any) => string
}

type User = {
  username: string
  name?: string
  gender?: string
  department?: string
  email?: string
  phone?: string
  status?: string
}

defineProps({
  height: { type: String, default: '250' }, // 表格高度
  columns: { type: Array as PropType<Column[]>, required: true }, // 列配置
  tableData: { type: Array as PropType<User[]>, required: true }, // 数据源
})
</script>
